<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Dili Food</title>
		<link rel="stylesheet" href="./css/newmes.css" />
		<link rel="stylesheet" href="./css/bk.css" />
		<link rel="icon" href="./food.ico">
	</head>
	<body>

		<div class="page">
			<img src="https://restaurant-1049877-pic24.websiteonline.cn/upload/banner-3.jpg"
				style="width:1528px;height:auto;position:absolute;top:50px;">
			<div class="new-main">
				<div class="new-main-title">
					<div class="line1"></div>
					<span class="main-title">美食资讯</span>
					<span class="main-title-bt">FOOD NEWS</span>
					<div class="line2"></div>
				</div>
				<div class="tabsbox" id="tab">
					<!-- tab标签 -->
					<nav class="firstnav">
						<ul>
							<li class="liactive"><span>行业资讯</span></li>
							<li><span>餐饮知识</span></li>
						</ul>
					</nav>
					<!-- tab内容 -->
					<div class="tabscon">
						<section class="conactive">

							<p><span class="date">2021 11.2</span><a href="#">日本较大抹茶餐饮七叶和茶登陆上海</a>
								<br />
								<span>日本较大的抹茶餐饮连锁正式登陆上海，其中国**店以打造健康潮流的抹茶专营店为理念，选择在沪上人气之地美罗城地下一层。开幕......</span>
							</p>

							<p><span class="date">2021 10.28</span><a href="#">北京年内推出早餐“规范店”和“示范店”</a>
								<br />
								<span>北京市商务委相关负责人在日前召开的本市“早餐工作经验交流会”上表示，2010年，本市早餐示范工作的总体目标是：发掘一批......</span>
							</p>

							<p><span class="date">2021 10.20</span><a href="#">成都餐饮企业进中国餐饮百强 可获奖5万</a>
								<br />
								<span>成都餐饮企业进2009年度中国餐饮百强榜可获奖5万元。3日，成都市商务局和市财政局联合下发了《成都市2010年度支持重点......</span>
							</p>

							<p><span class="date">2021 9.25</span><a href="#">两部门开展餐饮服务食品安全百千万示范工程建设</a>
								<br />
								<span>为建立健全餐饮服务食品安全责任落 实的有效机制，充分发挥餐饮服务食品安全示范单位的**带动和辐射示范作用，进一步提高餐饮......</span>
							</p>

							<p><span class="date">2021 9.10</span><a href="#">卫生部即将发布“食品安全标准管理办法”</a>
								<br />
								<span>近期卫生部即将对外发布《食品安全国家标准管理办法》和《食品安全企业标准备案办法》.</span>
							</p>

							<p><span class="date">2021 8.25</span><a href="#">卫生部即将发布“食品安全标准管理办法”</a>
								<br />
								<span>７月７日，卫生部食品安全综合协调与卫生监督局有关负责人７日强调，食品生产经营单位应当依法按照规定的品种、用量和范围使用......</span>
							</p>

						</section>
						<section>
							<p><span class="date">2021 11.4</span><a href="#">“炖”的方法和窍门</a>
								<br />
								<span>蒸的时间不足，会使原料不熟和少 香鲜味道；蒸的时间过长，也会使原料过于熟烂和散失香鲜滋味。</span>
							</p>

							<p><span class="date">2021 9.30</span><a href="#">吃菜花要多嚼几口</a>
								<br />
								<span>菜花，又叫花椰菜，是由甘蓝演化而来，起源于欧洲地中海沿岸，在《时代》杂志推荐的10大健康食品中名列第 四。</span>
							</p>

							<p><span class="date">2020 12.25</span><a href="#">健康饮食的19个**谎言</a>
								<br />
								<span>为了健康，你恪守着关于饮食的种种箴言。但是你知道吗？那些你一直深信不疑的饮食箴言，其实很多是充满了片 面性的谎言！现在，......</span>
							</p>

							<p><span class="date">2021 7.7</span><a href="#">刮芋头手痒怎么办</a>
								<br />
								<span>因刮芋头皮而发痒时，若将双手放在炉火上方略烤一下，即可止痒。但使用此法时，须注意别灼伤手皮</span>
							</p>
							
							<p><span class="date">2021 7.1</span><a href="#">留住蔬菜的维生素</a>
								<br />
								<span>要想多吸收蔬菜中的维生素，必须注意保护蔬菜中的维生素。</span>
							</p>
						</section>
					</div>
				</div>
			</div>
			<div class="footer" style="top:1600px">Create by noblegasesgoo@2021</div>
		</div>
		<div class="title">
			<img class="symbol" src="https://restaurant-1047504-pic9.websiteonline.cn/upload/logo.png">
			<div>
				<!-- 导航栏 -->
				<ul>
					<li><a href="home.html">首页</a></li>
					<li><a href="purchase.html">菜品详情</a></li>
					<li><a href="introduce.html">关于我们</a></li>
					<li><a href="newmes.html">新闻资讯</a></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var that;
			class Tab {
				constructor(id) {
					//获取元素
					that = this;
					this.main = document.querySelector(id);
					//获取li的父元素
					this.ul = this.main.querySelector('.firstnav ul:first-child');
					this.lis = this.main.querySelectorAll('li');
					this.sections = this.main.querySelectorAll('section');
					//section的父元素
					for (var i = 0; i < this.lis.length; i++) {
						this.lis[i].index = i;
						this.lis[i].onclick = this.toggleTab; //函数加小括号和不加的区别:不加点击才调用,加了后页面加载就调用
					}
				}
				// 1.切换功能
				toggleTab() {
					// console.log(this.index);
					that.clearClass(); //利用构造函数里的this调用这个方法才能li和sections都作用到
					this.className = 'liactive'; //this指向的是lis而非构造函数里的this,所以需要用全局变量that
					that.sections[this.index].className = 'conactive'; // conactive绑定的样式为下边框消失
				}
				// 清除li和section名字的函数
				clearClass() {
					for (var i = 0; i < this.lis.length; i++) {
						this.lis[i].className = '';
						this.sections[i].className = '';
					}
				}
			}
			var tab = new Tab('#tab');
		</script>
	</body>
</html>
